<template>
  <div class="footer" :class="isDesktop ? 'd-flex px-5 pb-12' : 'flex-column d-flex justify-center align-center pb-4'">
    <div class="d-flex" :class="isDesktop ? 'flex-column gap-col-16 pr-12' : 'flex-column-reverse w-100'">
      <div v-if="!isDesktop" class="px-4">
        <v-divider class="my-4"></v-divider>
      </div>
      <div class="d-flex gap-row-8" :class="isDesktop ? 'justify-start' : 'justify-center pt-2'">
        <a href="https://www.tiktok.com/@fantasi.one" target="_blank"><Icon size="30" name="tiktokRounded"></Icon></a>
        <a href="https://x.com/FantasiOne" target="_blank"><Icon size="30" name="twitterRounded"></Icon></a>
        <a href="https://www.instagram.com/fantasi.one" target="_blank"
          ><Icon size="30" name="instagramRounded"></Icon
        ></a>
      </div>
      <div class="text-no-wrap flex gap-col-8" :class="{ 'text-center': !isDesktop }">
        <p class="font-size-14 font-weight-500 line-height-140">
          <span class="pr-3">{{ $t('info.contactUs') }}</span>
          <a :href="'mailto:' + SUPPORT_MAIL">{{ SUPPORT_MAIL }}</a>
        </p>
        <p class="font-size-14 font-weight-500 line-height-140">
          <span class="pr-3">{{ $t('info.address') }}</span>
          <span>Dawson House 5 Jewry St, London</span>
        </p>
      </div>
    </div>
    <div
      class="d-flex text-no-wrap"
      :class="isDesktop ? 'flex-row gap-row-48' : 'flex-column justify-center align-center gap-col-8 w-100 text-center'"
    >
      <div class="v-col-6 pa-0 gap-col-8 font-size-14 font-weight-500 line-height-140">
        <div @click="toLegal(`terms-of-service`)" class="pointer">{{ $t('title.tos') }}</div>
        <div @click="toLegal(`privacy-policy`)" class="pointer">{{ $t('title.pp') }}</div>
        <div @click="toLegal(`cookie-policy`)" class="pointer">{{ $t('title.cp') }}</div>
        <div @click="toLegal(`dmca`)" class="pointer">DMCA</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import { SUPPORT_MAIL } from '@/constant'

const appStore = useAppStore()
const { isDesktop } = storeToRefs(appStore)

const router = useRouter()
function toLegal(pageKey) {
  router.push({ name: 'mine', params: { to: `legal/${pageKey}` } })
}
</script>
<style scope lang="scss">
.footer {
  bottom: 0;
  width: 100%;
  padding-top: 3.125rem;
  background-color: rgb(var(--v-theme-background));
}
</style>
